30天用React打造AI工具箱 Day2

昨天我們已經把專案跑起來，確認React和Tailwind都能正常運作。
從今天開始，我們先補一點JavaScript基礎，因為React本質上就是一個用JavaScript寫出來的UI函式庫。因此很多新手會直接跳進React，但如果對變數或資料型態不熟，就會很快卡住。
所以今天的重點很簡單：搞懂怎麼宣告變數，還有常見的資料型態。

定義變數

在JavaScript中，宣告變數的方法有三種，分別是var、let、const，
而這三種宣告方法的區別如下：

• var：作用域為funtion，可重新賦值。
• let：區塊作用域，可重新賦值。
• const：區塊作用域，不可重新賦值。

在React中，大部分情況都是用到let和const，下面是它的使用方法：

let name = "小明";    // 可以改變
const pi = 3.14159;   // 不可以重新賦值

name = "小華";       // 合法
pi = 3.14;           // 會報錯

資料型態

JavaScript常見的資料型態有：

• 字串 (string)
• 數字 (number)
• 布林值 (boolean)
• 空值 (null)
• 未定義 (undefined)
• 物件 (object)
• 陣列 (array)

型態轉換

不同型態之間可以互相轉換：

// 字串轉數字
let numString = "123";
let convertedNumber = Number(numString);
console.log(typeof convertedNumber); // "number"

// 數字轉字串
let strFromNum = String(456);
console.log(typeof strFromNum); // "string"

// 轉布林值
let isOk = Boolean(0);
console.log(isOk); // false

在 React 中，這些型態轉換很常見，例如處理 API 傳回來的資料、表單輸入的字串等。